<template>
  <div class="calculator">
    <div class="display">{{ current || '0' }}</div>
    <div class="btn" @click="clear()">C</div>
    <div class="btn" @click="sign()">+/-</div>
    <div class="btn" @click="percent()">%</div>
    <div class="btn operator" @click="divide()">÷</div>
    <div class="btn" @click="append(7)">7</div>
    <div class="btn" @click="append(8)">8</div>
    <div class="btn" @click="append(9)">9</div>
    <div class="btn operator" @click="times">x</div>
    <div class="btn" @click="append(4)">4</div>
    <div class="btn" @click="append(5)">5</div>
    <div class="btn" @click="append(6)">6</div>
    <div class="btn operator" @click="minus()">−</div>
    <div class="btn" @click="append(3)">3</div>
    <div class="btn" @click="append(2)">2</div>
    <div class="btn" @click="append(1)">1</div>
    <div class="btn operator" @click="add()">+</div>
    <div class="btn zero" @click="append(0)">0</div>
    <div class="btn" @click="dot()">.</div>
    <div class="btn operator" @click="equal()">=</div>
  </div>
</template>
<script>

export default {
  name: 'Calculator',
  data() {
    return {
      current: '',
      previous: null, // 前一个操作数
      operator: null, // 运算函数
      operatorClicked: false // 是否点击了操作符
    }
  },
  methods: {
    clear() { // 清理显示
      this.current = ''
    },
    sign() { // 设置正负号
      this.current = this.current.charAt(0) === '-' ? this.current.slice(1) : `-${this.current}`
    },
    percent() { // 百分比
      this.current = `${parseFloat(this.current) / 100}`
    },
    append(number) { // 数字操作
      if (this.operatorClicked) { // 当已点击过操作符时将前次输入的数清空
        this.current = ''
        this.operatorClicked = false
      }
      this.current = `${this.current}${number}`
    },
    dot() { // 点号操作
      if (this.current.indexOf('.') === -1) {
        this.append('.')
      }
    },
    setPrevious() {
      this.previous = this.current
      this.operatorClicked = true
    },
    divide() { // 除法
      // 创建一函数对象
      this.operator = (a, b) => a / b
      this.setPrevious()
    },
    times() { // 乘法
      this.operator = (a, b) => a * b
      this.setPrevious()
    },
    minus() { // 减法
      this.operator = (a, b) => a - b
      this.setPrevious()
    },
    add() { // 加法
      this.operator = (a, b) => a + b
      this.setPrevious()
    //   this.equal()
    },
    equal() { // 等号计算结果
      // 执行计算，+号为快速转换成数值类型
      this.current = `${this.operator(+this.previous, +this.current)}`
      this.previous = null
    }
  }
}
</script>

<style scoped>
  .calculator {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* fr 单位是一个自适应单位*/
    grid-auto-rows: minmax(45px, auto); /*创建的行高度的最小值50px，最大值与最大内容一致*/
    margin: auto;
    width: 300px;
    font-size: 30px;
  }
  .display {
    grid-column: 1 / 5; /*左边框在第1根垂直线，右边框在第5根垂直线*/
    background: #333;
    color: white;
  }
  .zero {
    grid-column: 1 / 3; /*左边框在第1根垂直线，右边框在第3根垂直线*/
  }
  .btn {
    border: 1px solid #999;
    background: #F2F2F2;
  }
  .operator {
    background-color: orange;
    color: white;
  }
</style>

